<template>
  <div>
    <div class="logo"><img src="@/assets/images/logo.png" alt="互联网+培训平台" width="100%"></div>
    <div class="info-container">
      <mt-field placeholder="邮箱或手机号" type="text" v-model="info.account"></mt-field>
      <mt-field placeholder="密码" type="password" v-model="info.password"></mt-field>
      <mt-field placeholder="验证码" type="text" v-model="info.validCode" v-if="failedCount >= 5">
        <div class="valid-code" @click="getValidCode" :style="{'background-image': 'url(' + validCodeUrl + ')'}">
          
        </div>
      </mt-field>
    </div>
    <div class="page-button-group my-6 px-2">
      <mt-button size="large" type="primary" class="bg-blue" @click="login">登录</mt-button>
      <mt-button size="large" type="primary" class="bg-dark-blue" @click="register">注册</mt-button>
    </div>
    <div class="login-tip">
      <span @click="forgetPassword" class="color-gray">登录遇到问题？</span>
      <span @click="goHomePage" class="color-gray pl-2">暂不登录</span>
    </div>
  </div>
</template>
<script>

import { Toast } from 'mint-ui'
import userApi from '@/api/user'
import { Const } from '@/consts'
import utils from '@/utils'
export default {
  data () {
    return {
      info: {
        account: '',
        password: '',
        validCode: ''
      },
      validCodeUrl: '',
      validCodeToken: '',
      failedCount: 0,
    }
  },

  created() {
    this.failedCount = utils.get('LOGIN_FAILED_COUNT') || 0
    if (this.failedCount >= 5) {
      this.getValidCode()
    }
  },

  methods: {    
    formatParams () {
      let data = {
        params: {
          phoneno: this.info.account,
          password: this.info.password
        },
        headers: {}
      }

      data.headers[Const.H_VERIFICATION_CODE] = this.info.validCode;
      data.headers[Const.H_VERIFICATION_CODE_TOKEN] = this.validCodeToken;

      return data
    },

    login () {
      
      if (!this.info.account) {
        Toast('请填写登录手机号')
        return
      }

      if (!this.info.password) {
        Toast('请填写密码')
        return
      }

      if (this.failedCount >= 5 && !this.info.validCode) {
        Toast('请填写验证码')
        return
      }
      
      userApi.login(this.formatParams()).then(resp => {
        // Toast(resp[Const.RESP_MESSAGE]);
        // TODO: 跳转
        utils.saveUserInfo(resp[Const.RESP_RESULT])
        utils.clear('LOGIN_FAILED_COUNT')
        this.$router.replace('/index')
      }).catch(resp => {
        if (resp.statusCode == '200') {
          Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
        }
        // TODO: 记录失败次数        
        this.failedCount++;
        if (this.failedCount >= 5) {
          this.getValidCode()
        }
        utils.save('LOGIN_FAILED_COUNT', this.failedCount)
        this.validCode = ''
        // if (resp.statusCode == '200') {
        //   Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
        // }
      })
    },

    register () {
      this.$router.push('/register')
    },

    forgetPassword () {
      this.$router.push('/forgetpwd')
    },

    goHomePage () {
      this.$router.push('/index')
    },

    getValidCode() {
      userApi.getValidCodeImg({
        params: {
          usage: 'LOGIN'
        }
      }).then(resp => {
        this.validCodeUrl = resp[Const.RESP_RESULT] || ''
        this.validCodeToken = /\?token=([^ &]+)/.exec(this.validCodeUrl)[1] || ''
      }).catch(resp => {
        Toast(resp[Const.RESP_MESSAGE])
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$scale: 1.2;

.logo {
  padding: 100px 10px 88px 20px;
}

.info-container {
  margin: 0 16px;
}

.login-tip {
  margin: 20px 0;
  width: 100%;
  font-size: 12px * $scale;
}

.valid-code {
  width: 180px;
  height: 45px;
  background-position: center center;
}
</style>
